<template>
  <div class="carbon-credit-page">

    
    <!-- 筛选条件区域 -->
    <div class="filter-section">
      <el-row :gutter="20" class="filter-row">
        <el-col :span="4">
          <div class="filter-item" style="display: flex; align-items: center">
            <span class="filter-label">核证标准</span>
            <el-select
              v-model="form.certificationCriteria"
              placeholder="全部"
              clearable
              class="filter-select"
              style="flex: 1"
              @change="resetMainPagination"
            >
              <el-option v-for="item in certificationCriteria" :label="item.itemCh" :value="item.itemValue":key="item.id" ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="filter-item" style="display: flex; align-items: center">
            <span class="filter-label">领域</span>
            <el-select
              v-model="form.fieldCode"
              placeholder="全部"
              clearable
              class="filter-select"
              style="flex: 1"
              @change="resetMainPagination"
            >
              <el-option v-for="item in projectScope" :label="item.itemCh" :value="item.itemValue":key="item.id" ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="filter-item" style="display: flex; align-items: center">
            <span class="filter-label">行业</span>
            <el-select
              v-model="form.industry"
              placeholder="全部"
              clearable
              class="filter-select"
              style="flex: 1"
              @change="resetMainPagination"
            >
              <el-option v-for="item in industory" :label="item.itemCh" :value="item.itemValue":key="item.id" ></el-option>
            </el-select>
          </div>
        </el-col>
         <el-col :span="8">
          <div style="display: flex;" class="filter-item2">
            <span style="display: 1;margin-top: 8px; " class="filter-label2">方法学搜索</span>
            <div class="search-container">
              <el-input
                v-model="form.mName"
                placeholder="输入方法学名称"
                clearable
                class="search-input"
                @keyup.enter.native="handleMethodSearch"
              ></el-input>
              <el-button type="success" plain @click="queryMethods"
                >查询</el-button
              >
            </div>
          </div>
        </el-col>

      </el-row>

    
    </div>

    <!-- 表格数据区域 -->
    <div class="table">
      <el-table
        :data="tableData"
        stripe
        @selection-change="handleSelectionChange"
        style="width: 100%"
        v-loading="tableLoading"
      >
        <el-table-column prop="id" label="序号" align="center" width="80"></el-table-column>
        <el-table-column
          prop="methodCode"
          label="方法学编号"
          show-overflow-tooltip
          width="160"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          align="left"
          show-overflow-tooltip
          width="300"
        ></el-table-column>
        <el-table-column
          prop="fieldCode"
          label="领域 "
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="industryCode"
          label="行业"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="certificationCriteria"
          label="核证标准"
          align="center"
          width="180"
          show-overflow-tooltip
        ></el-table-column>
        
        <el-table-column label="操作" width="385" align="center">
          <template v-slot="scope">
            <div class="operation-btns">
              <span 
                class="btn-text view" 
                @click="handleView(scope.row.sourceFileUrl)"
              >查看</span>
               <span class="btn-text offline" @click="handleOffline(scope.row)"
                >创建项目</span>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination" v-if="mainTotal > 0">
        <el-pagination
          background
          @current-change="handleMainPageChange"
          @size-change="handleMainPageSizeChange"
          :current-page="mainPageNum"
          :page-size="mainPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="mainTotal"
          :page-count="mainTotalPages"
          :page-sizes="[5, 10, 15, 20]"
        ></el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
import {
  getFeiShuUpLoadProjectParams,
  getUpLoadFileParams,
} from "@/api/tenant";

export default {
  name: "method",
  data() {
    return {

       // 我要买的领域
      projectScope: [],
      // 我要买的资产类型
      assetType: [],
      // 我要买的项目类型
      projectType: [],
      // 交割方式列表
      deliveryMethod: [],
      // 交割场所列表
      deliveryExchange: [],

      // 核证机构
      certificationCriteria: [],
      // 交易状态
      transactionStatus: [],
      // 资产状态
      assetsStatus: [],
      //产业类型
      industory:[],

      tableData:[],
      mainPageNum: 1,       // 主表格当前页码
      mainPageSize: 10,     // 主表格每页条数
      methodUrl:
        "https://carbonmsger.feishu.cn/drive/folder/fldcn66yo6D4OoXwZqEMHL6OQSg?from=space_persnoal_filelist",
      user: JSON.parse(localStorage.getItem('user') || '{}'),

      form: {
        certificationCriteria: '', // 核证标准
        mName: '',          // 方法学（搜索用）
        projectScope:'',
        industry:''
      },
    };
  },


  mounted() {
    this.queryMethods();
    this.loadSelectorData();
  },

  methods:{

     queryMethods() {
      const params = {
        ...this.form,
        pageNum: this.mainPageNum,      // 添加当前页码
        pageSize: this.mainPageSize  // 添加每页条数
      };

      // 处理默认值为空的情况
      if (params.certificationCriteria === '0070000000') {
        params.certificationCriteria = null;
      }
      if (params.industory === '0020000000') {
          params.industory = null;
      }
      if (params.fieldCode === '0030000000') {
          params.fieldCode = null;
      }
      this.$request.get('/assets/carbonMethodology/queryBySelector', {
        params: params
      }).then(res => {
 
        if (res.code === 200) {
          this.tableData = res.data.records || [];  // 假设数据在records字段中
          this.mainTotal = res.data.total || 0;     // 总记录数
          
        }
      }).catch(error => {
        console.error("查询资产列表失败:", error);
      });
    },
    handleView(url){
         const searchUrl = url;
      
      // 在新窗口打开百度搜索页面
      window.open(searchUrl, '_blank');
    },

    handleOffline(row){
    this.$router.push({
    path: '/carbon/projectCreate/projectadd',
    query: { code: row.dictCode,
            
     } // 通过query传递参数，与详情页的this.$route.query.id对应
  })
    },
      loadSelectorData() {
      this.$request.get('/assets/carbonCreditAssets/querySelector').then(res => {
        if (res.code === 200) {
          this.certificationCriteria = res.data.certificationList
          this.transactionStatus = res.data.transactionStatusList
          this.assetsStatus = res.data.assetsStatusList
          this.projectScope = res.data.projectScopeList
          this.assetType = res.data.assetTypeList
          this.projectType = res.data.projectTypeList
          this.deliveryMethod = res.data.deliveryMethodList
          this.deliveryExchange = res.data.deliveryExchangeList
          this.industory = res.data.industoryList
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.carbon-credit-page {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 64px);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

::v-deep .project-selector-table {
  border: none !important;
}

::v-deep .project-selector-table .el-table__header,
::v-deep .project-selector-table .el-table__body,
::v-deep .project-selector-table .el-table__row,
::v-deep .project-selector-table th,
::v-deep .project-selector-table td {
  border: none !important;
  border-collapse: collapse !important;
}

/* 顶部栏样式 */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #e6f7ed;
  padding: 10px 20px;
  border-radius: 4px;
  margin-bottom: 20px;

  .header-left {
    display: flex;
    align-items: center;

    .title {
      font-size: 16px;
      font-weight: bold;
      color: #52c41a;
      margin-left: 8px;
    }
  }

  .header-middle {
    color: #666;
    text-align: left;
    flex: 1;
    margin: 0 20px;
    font-size: 14px;

    .stat-item {
      margin-right: 10px;
    }

    .stat-value {
      color: #6cba12;
      font-weight: 700;
    }
  }

  .header-right {
    button {
      margin-left: 10px;
      &.el-button--primary {
        border-color: #409eff;
        color: #409eff;
      }
      &.el-button--success {
        border-color: #67c23a;
        color: #67c23a;
      }
    }
  }
}

/* 筛选区域样式 */
.filter-section {
  background: #f8f9fa;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;

  .filter-row,
  .search-row {
    display: flex;
    flex-wrap: wrap;
  }

  .filter-item {
    margin-bottom: 10px;
  }

  .filter-label {
    display: inline-block;
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;

    min-width: 60px;
  }

  .filter-label2 {
    display: inline-block;
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
    width: 100px;

  }

  .filter-select,
  .filter-date {
    width: 100%;
    --el-input-border-color: #dcdfe6;
  }

  .search-container {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .search-input {
    flex: 1;
    margin-right: 10px;
    --el-input-border-color: #dcdfe6;
  }
}

/* 操作按钮样式 */
.operation-btns {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;

  .btn-text {
    cursor: pointer;
    color: #409eff;
    &.view {
      color: #409eff;
    }
    &.offline {
      color: #409eff;
    }
    &.inner {
      color: #67c23a;
    }
    &.modify {
      color: #f5a623;
    }
    &.delete {
      color: #f56c6c;
    }
    &:hover {
      text-decoration: underline;
    }
  }
}

/* 分页样式 */
.pagination {
  margin-top: 15px;
  text-align: right;
  padding: 10px 0;
}

/* 上传弹窗样式 */
.upload-dialog-content {
  padding: 20px 40px;
}

.form-row {
  margin-bottom: 5px;
}

.file-name {
  margin-top: 6px;
  color: #666;
  font-size: 12px;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep .el-form-item__label {
  font-weight: 1000;
}

::v-deep .el-upload__tip {
  margin-top: 5px !important;
}

/* 项目选择弹窗样式 */
.project-search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.project-pagination {
  text-align: right;
  margin-top: 15px;
}
</style>